<!--组件调用页面-->
<template>
    <div class="parent">
        <Child>
            <template #header>
                <div>组件1的 header</div>
            </template>
            <template #default>
                <p>组件1的 content</p>
            </template>
            <template #footer>
                <p>组件1的 footer</p>
            </template >
        </Child>
        <hr/>
        <Child>
            <template #header>
                <div>组件2的 header</div>
            </template>
            <template #default>
                <p>组件2的 content</p>
            </template>
            <template #footer>
                <p>组件2的 footer</p>
            </template >
        </Child>
    </div>
</template>

<script setup>
import Child from '../../components/common/slot/index.vue';
</script>
<style lang="less" scoped>
.child {
    margin: 10px 0;
}
</style>
